<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理 - 新增商品</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/quill@1.3.7/dist/quill.min.js"></script>
    <script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
    <link href="https://unpkg.com/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            gap: 20px;
        }

        .header {
            background: linear-gradient(135deg, #409EFF, #337ecc);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            display: flex;
            align-items: center;
            font-size: 22px;
            font-weight: 500;
        }

        .header h1 i {
            margin-right: 10px;
            font-size: 24px;
        }

        .main-content {
            flex: 1;
        }

        .preview-panel {
            width: 340px;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            position: sticky;
            top: 20px;
            height: fit-content;
        }

        .card {
            background: white;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .card-header {
            padding: 16px 20px;
            background: #f9fbfd;
            border-bottom: 1px solid #ebeef5;
            font-size: 16px;
            font-weight: 600;
            color: #409EFF;
            display: flex;
            align-items: center;
        }

        .card-header i {
            margin-right: 8px;
            font-size: 18px;
        }

        .card-body {
            padding: 20px;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }

        .form-col {
            padding: 0 10px;
            margin-bottom: 20px;
            width: 50%;
        }

        .form-col-full {
            width: 100%;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #606266;
            font-size: 14px;
        }

        .form-label.required::before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }

        .sku-matrix {
            background: #f9fbfd;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 15px;
            margin-top: 15px;
            max-height: 400px;
            overflow-y: auto;
        }

        .sku-row {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px dashed #ebeef5;
        }

        .sku-row:last-child {
            border-bottom: none;
        }

        .spec-name {
            min-width: 120px;
            font-weight: 500;
            color: #409EFF;
        }

        .preview-item {
            padding: 15px;
            border-bottom: 1px solid #ebeef5;
        }

        .preview-title {
            font-weight: 600;
            margin-bottom: 10px;
            color: #409EFF;
        }

        .preview-content {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .preview-img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            object-fit: cover;
            border: 1px solid #ebeef5;
        }

        .action-bar {
            display: flex;
            justify-content: center;
            padding: 20px 0;
            background: white;
            border-radius: 8px;
            margin-top: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }

        .step-indicator {
            display: flex;
            justify-content: center;
            margin-bottom: 25px;
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            width: 120px;
        }

        .step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 20px;
            left: 80px;
            width: 40px;
            height: 2px;
            background: #dcdfe6;
        }

        .step.active:not(:last-child)::after {
            background: #409EFF;
        }

        .step-number {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ebeef5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #909399;
            margin-bottom: 8px;
            z-index: 1;
        }

        .step.active .step-number {
            background: #409EFF;
            color: white;
        }

        .step-name {
            font-size: 13px;
            color: #909399;
        }

        .step.active .step-name {
            color: #409EFF;
            font-weight: 500;
        }

        .presell-panel {
            background: #f0f7ff;
            border: 1px solid #c6e2ff;
            border-radius: 4px;
            padding: 15px;
            margin-top: 15px;
        }

        .quill-editor {
            height: 300px;
            margin-bottom: 20px;
        }

        .spec-tag {
            margin: 0 5px 5px 0;
        }

        .mobile-preview {
            width: 300px;
            background: white;
            border-radius: 12px;
            padding: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            margin: 0 auto;
        }

        .mobile-header {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
        }

        .mobile-screen {
            height: 500px;
            overflow-y: auto;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 10px;
        }

        .mobile-product-img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 6px;
        }

        .mobile-product-title {
            font-size: 18px;
            font-weight: bold;
            margin: 10px 0;
        }

        .mobile-product-price {
            color: #f56c6c;
            font-size: 22px;
            font-weight: bold;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <h1><i class="el-icon-goods"></i> 商品管理 - 新增商品</h1>
    </div>

    <div class="step-indicator">
        <div class="step" :class="{active: currentStep >= 1}">
            <div class="step-number">1</div>
            <div class="step-name">基础信息</div>
        </div>
        <div class="step" :class="{active: currentStep >= 2}">
            <div class="step-number">2</div>
            <div class="step-name">媒体信息</div>
        </div>
        <div class="step" :class="{active: currentStep >= 3}">
            <div class="step-number">3</div>
            <div class="step-name">规格库存</div>
        </div>
        <div class="step" :class="{active: currentStep >= 4}">
            <div class="step-number">4</div>
            <div class="step-name">营销服务</div>
        </div>
        <div class="step" :class="{active: currentStep >= 5}">
            <div class="step-number">5</div>
            <div class="step-name">高级设置</div>
        </div>
    </div>

    <div class="container">
        <div class="main-content">
            <!-- 基础信息卡片 -->
            <div class="card" v-show="currentStep === 1">
                <div class="card-header">
                    <i class="el-icon-document"></i> 基础信息
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-col">
                            <label class="form-label required">商品名称</label>
                            <el-input v-model="formData.name" placeholder="请输入商品名称"></el-input>
                        </div>
                        <div class="form-col">
                            <label class="form-label required">商品分类</label>
                            <el-cascader
                                    v-model="formData.categoryId"
                                    :options="categories"
                                    placeholder="请选择商品分类"
                                    clearable
                            ></el-cascader>
                        </div>
                        <div class="form-col">
                            <label class="form-label required">商品品牌</label>
                            <el-select v-model="formData.brandId" placeholder="请选择品牌">
                                <el-option
                                        v-for="brand in brands"
                                        :key="brand.id"
                                        :label="brand.name"
                                        :value="brand.id"
                                ></el-option>
                            </el-select>
                        </div>
                        <div class="form-col">
                            <label class="form-label required">商品状态</label>
                            <el-radio-group v-model="formData.status">
                                <el-radio :label="1">立即上架</el-radio>
                                <el-radio :label="0">暂不上架</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="form-col form-col-full">
                            <label class="form-label required">简短描述</label>
                            <el-input
                                    type="textarea"
                                    v-model="formData.description"
                                    placeholder="请输入商品简短描述（用于SEO和列表展示）"
                                    maxlength="200"
                                    show-word-limit
                                    rows="3"
                            ></el-input>
                        </div>
                        <div class="form-col">
                            <label class="form-label">商品标签</label>
                            <el-select
                                    v-model="formData.tagIds"
                                    multiple
                                    placeholder="请选择商品标签"
                            >
                                <el-option
                                        v-for="tag in tags"
                                        :key="tag.id"
                                        :label="tag.name"
                                        :value="tag.id"
                                ></el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 多媒体展示卡片 -->
            <div class="card" v-show="currentStep === 2">
                <div class="card-header">
                    <i class="el-icon-picture"></i> 媒体信息
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-col">
                            <label class="form-label required">商品主图</label>
                            <el-upload
                                    action="#"
                                    :auto-upload="false"
                                    :on-change="handleMainImageChange"
                                    :show-file-list="false"
                                    accept="image/*"
                            >
                                <div class="image-uploader">
                                    <img v-if="formData.mainImage" :src="formData.mainImage" class="preview-img">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </div>
                            </el-upload>
                            <div class="el-upload__tip">建议尺寸：800x800px，大小不超过2MB</div>
                        </div>
                        <div class="form-col">
                            <label class="form-label required">商品相册</label>
                            <el-upload
                                    action="#"
                                    list-type="picture-card"
                                    :auto-upload="false"
                                    :on-change="handleAlbumChange"
                                    :on-remove="handleAlbumRemove"
                                    :file-list="albumFiles"
                                    multiple
                                    accept="image/*"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <div class="el-upload__tip">最多可上传10张图片，支持拖拽排序</div>
                        </div>
                        <div class="form-col form-col-full">
                            <label class="form-label">商品视频</label>
                            <el-input v-model="formData.video" placeholder="请输入商品视频链接">
                                <template slot="append">
                                    <el-button @click="previewVideo">预览</el-button>
                                </template>
                            </el-input>
                        </div>
                        <div class="form-col form-col-full">
                            <label class="form-label required">商品详情</label>
                            <div class="quill-editor">
                                <quill-editor v-model="formData.detail" :options="editorOptions"></quill-editor>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 规格与库存卡片 -->
            <div class="card" v-show="currentStep === 3">
                <div class="card-header">
                    <i class="el-icon-s-grid"></i> 规格与库存
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-col form-col-full">
                            <label class="form-label">商品规格</label>
                            <div>
                                <el-tag
                                        v-for="(spec, index) in specs"
                                        :key="index"
                                        class="spec-tag"
                                        closable
                                        @close="removeSpec(index)"
                                >
                                    {{ spec.name }}: {{ spec.values.join(',') }}
                                </el-tag>
                                <el-button size="small" @click="showAddSpecDialog = true">
                                    <i class="el-icon-plus"></i> 添加规格
                                </el-button>
                            </div>
                        </div>

                        <div class="form-col form-col-full" v-if="skuMatrix.length > 0">
                            <label class="form-label required">SKU列表</label>
                            <div class="sku-matrix">
                                <div class="sku-row" v-for="(sku, index) in skuMatrix" :key="index">
                                    <div class="spec-name">{{ sku.specText }}</div>
                                    <div style="flex: 1; display: flex; gap: 15px;">
                                        <div style="width: 180px;">
                                            <label class="form-label required">销售价</label>
                                            <el-input v-model="sku.price" placeholder="¥">
                                                <template slot="append">元</template>
                                            </el-input>
                                        </div>
                                        <div style="width: 180px;">
                                            <label class="form-label required">库存</label>
                                            <el-input v-model="sku.stock" placeholder="库存数量"></el-input>
                                        </div>
                                        <div style="width: 200px;">
                                            <label class="form-label">SKU编码</label>
                                            <el-input v-model="sku.skuCode" placeholder="SKU-001"></el-input>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div style="margin-top: 15px; display: flex; gap: 10px;">
                                <el-button type="primary" size="small" @click="batchFill('price', 0)">
                                    批量填充价格
                                </el-button>
                                <el-button type="primary" size="small" @click="batchFill('stock', 0)">
                                    批量填充库存
                                </el-button>
                                <el-button size="small" @click="importFromExcel">
                                    <i class="el-icon-upload2"></i> Excel导入
                                </el-button>
                            </div>
                        </div>

                        <div class="form-col form-col-full">
                            <label class="form-label">预售配置</label>
                            <div class="presell-panel">
                                <el-switch
                                        v-model="enablePresell"
                                        active-text="启用预售"
                                ></el-switch>

                                <div v-if="enablePresell" style="margin-top: 15px;">
                                    <div class="form-row">
                                        <div class="form-col">
                                            <label class="form-label required">预售开始时间</label>
                                            <el-date-picker
                                                    v-model="presellConfig.startTime"
                                                    type="datetime"
                                                    placeholder="选择日期时间"
                                            ></el-date-picker>
                                        </div>
                                        <div class="form-col">
                                            <label class="form-label required">预售结束时间</label>
                                            <el-date-picker
                                                    v-model="presellConfig.endTime"
                                                    type="datetime"
                                                    placeholder="选择日期时间"
                                            ></el-date-picker>
                                        </div>
                                        <div class="form-col">
                                            <label class="form-label required">发货天数</label>
                                            <el-input v-model="presellConfig.deliveryDays">
                                                <template slot="append">天</template>
                                            </el-input>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 营销服务卡片 -->
            <div class="card" v-show="currentStep === 4">
                <div class="card-header">
                    <i class="el-icon-s-marketing"></i> 营销服务
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-col">
                            <label class="form-label">促销活动</label>
                            <el-select
                                    v-model="formData.promotionIds"
                                    multiple
                                    placeholder="请选择促销活动"
                            >
                                <el-option
                                        v-for="promotion in promotions"
                                        :key="promotion.id"
                                        :label="promotion.name"
                                        :value="promotion.id"
                                ></el-option>
                            </el-select>
                            <div class="el-upload__tip">活动有效期至：2023-12-31</div>
                        </div>
                        <div class="form-col">
                            <label class="form-label required">服务承诺</label>
                            <el-checkbox-group v-model="formData.services">
                                <el-checkbox v-for="service in serviceOptions" :key="service" :label="service"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="form-col">
                            <label class="form-label">新品推荐</label>
                            <div>
                                <el-checkbox v-model="formData.isNew" label="标记为新品"></el-checkbox>
                                <el-checkbox v-model="formData.isRecommend" label="推荐到首页"></el-checkbox>
                            </div>
                        </div>
                        <div class="form-col">
                            <label class="form-label required">运费模板</label>
                            <el-select v-model="formData.shippingTemplateId" placeholder="请选择运费模板">
                                <el-option
                                        v-for="template in shippingTemplates"
                                        :key="template.id"
                                        :label="template.name"
                                        :value="template.id"
                                ></el-option>
                            </el-select>
                            <el-button type="text" @click="previewShippingTemplate">预览模板</el-button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 高级设置卡片 -->
            <div class="card" v-show="currentStep === 5">
                <div class="card-header">
                    <i class="el-icon-setting"></i> 高级设置
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-col">
                            <label class="form-label">商品重量</label>
                            <el-input v-model="formData.weight" placeholder="请输入商品重量">
                                <template slot="append">g</template>
                            </el-input>
                        </div>
                        <div class="form-col">
                            <label class="form-label">商品体积</label>
                            <el-input v-model="formData.volume" placeholder="请输入商品体积">
                                <template slot="append">cm³</template>
                            </el-input>
                        </div>
                        <div class="form-col">
                            <label class="form-label">单笔限购</label>
                            <el-input v-model="formData.limitPerOrder" placeholder="0表示不限购">
                                <template slot="append">件</template>
                            </el-input>
                        </div>
                        <div class="form-col">
                            <label class="form-label">库存预警</label>
                            <el-input v-model="formData.stockWarning" placeholder="库存低于此值时预警"></el-input>
                        </div>
                    </div>
                </div>
            </div>

            <div class="action-bar">
                <el-button v-if="currentStep > 1" @click="prevStep">上一步</el-button>
                <el-button v-if="currentStep < 5" type="primary" @click="nextStep">下一步</el-button>
                <el-button v-if="currentStep === 5" type="success" @click="saveDraft">保存草稿</el-button>
                <el-button v-if="currentStep === 5" type="primary" @click="submitForm">提交审核</el-button>
            </div>
        </div>

        <div class="preview-panel">
            <h3 style="margin-bottom: 15px; text-align: center; color: #409EFF;">商品预览</h3>

            <div class="mobile-preview">
                <div class="mobile-header">
                    <span>商品详情</span>
                </div>
                <div class="mobile-screen">
                    <img v-if="formData.mainImage" :src="formData.mainImage" class="mobile-product-img">
                    <div v-else style="height: 300px; background: #f5f7fa; display: flex; align-items: center; justify-content: center; color: #909399;">
                        主图预览
                    </div>

                    <div class="mobile-product-title">{{ formData.name || '商品名称' }}</div>
                    <div class="mobile-product-price">¥{{ (Number(skuMatrix[0]?.price) || 0).toFixed(2) }}</div>
                    <div style="color: #909399; font-size: 14px; margin: 10px 0;">{{ formData.description || '商品描述' }}</div>

                    <div v-if="formData.services && formData.services.length > 0" style="display: flex; flex-wrap: wrap; gap: 5px; margin: 15px 0;">
                        <el-tag v-for="(service, index) in formData.services" :key="index" size="mini" type="info">{{ service }}</el-tag>
                    </div>
                </div>
            </div>

            <div style="margin-top: 20px;">
                <div class="preview-item">
                    <div class="preview-title">商品相册</div>
                    <div class="preview-content">
                        <img v-for="(img, index) in formData.albumImages" :key="index" :src="img" class="preview-img">
                        <div v-if="!formData.albumImages || formData.albumImages.length === 0" style="color: #909399; font-size: 13px;">
                            暂无相册图片
                        </div>
                    </div>
                </div>

                <div class="preview-item">
                    <div class="preview-title">规格库存</div>
                    <div v-if="skuMatrix.length > 0" style="max-height: 200px; overflow-y: auto;">
                        <div v-for="(sku, index) in skuMatrix" :key="index" style="padding: 8px 0; border-bottom: 1px dashed #eee;">
                            <div>{{ sku.specText }}</div>
                            <div style="display: flex; justify-content: space-between; margin-top: 5px;">
                                <span>¥{{ sku.price || 0 }}</span>
                                <span>库存: {{ sku.stock || 0 }}</span>
                            </div>
                        </div>
                    </div>
                    <div v-else style="color: #909399; font-size: 13px;">
                        未设置规格
                    </div>
                </div>

                <div class="preview-item">
                    <div class="preview-title">高级信息</div>
                    <div style="font-size: 13px;">
                        <div style="display: flex; justify-content: space-between; padding: 5px 0;">
                            <span>重量:</span>
                            <span>{{ formData.weight || 0 }}g</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding: 5px 0;">
                            <span>体积:</span>
                            <span>{{ formData.volume || 0 }}cm³</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; padding: 5px 0;">
                            <span>限购:</span>
                            <span>{{ formData.limitPerOrder || '不限' }}件</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加规格对话框 -->
    <el-dialog title="添加规格" :visible.sync="showAddSpecDialog" width="500px">
        <div style="margin-bottom: 15px;">
            <label class="form-label required">规格名称</label>
            <el-input v-model="newSpec.name" placeholder="如：颜色、尺寸"></el-input>
        </div>
        <div>
            <label class="form-label required">规格值</label>
            <div style="margin-bottom: 10px;">
                <el-tag
                        v-for="(value, index) in newSpec.values"
                        :key="index"
                        closable
                        @close="removeSpecValue(index)"
                >
                    {{ value }}
                </el-tag>
            </div>
            <el-input
                    v-model="specValueInput"
                    placeholder="输入后按回车添加"
                    @keyup.enter.native="addSpecValue"
            >
                <template slot="append">
                    <el-button @click="addSpecValue">添加</el-button>
                </template>
            </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
                <el-button @click="showAddSpecDialog = false">取 消</el-button>
                <el-button type="primary" @click="addSpec">确 定</el-button>
            </span>
    </el-dialog>
</div>

<script>
    // 注册Vue-Quill-Editor组件
    Vue.use(VueQuillEditor);
    
    // 富文本编辑器配置
    const editorOptions = {
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'script': 'sub' }, { 'script': 'super' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'direction': 'rtl' }],
                [{ 'size': ['small', false, 'large', 'huge'] }],
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['clean'],
                ['link', 'image', 'video']
            ]
        }
    };

    new Vue({
        el: '#app',
        data() {
            return {
                currentStep: 1,
                formData: {
                    albumImages: [],
                    brandId: '',
                    categoryId: '',
                    description: '',
                    detail: '',
                    id: null,
                    isNew: true,
                    isRecommend: true,
                    mainImage: '',
                    name: '',
                    promotionIds: [],
                    services: [],
                    shippingTemplateId: '',
                    skuList: [],
                    status: 1,
                    tagIds: [],
                    video: '',
                    weight: '',
                    volume: '',
                    limitPerOrder: '',
                    stockWarning: ''
                },
                albumFiles: [],
                specs: [],
                skuMatrix: [],
                newSpec: {
                    name: '',
                    values: []
                },
                specValueInput: '',
                showAddSpecDialog: false,
                enablePresell: false,
                presellConfig: {
                    deliveryDays: 7,
                    endTime: '',
                    isPresell: false,
                    startTime: ''
                },
                editorOptions: editorOptions,

                // 模拟数据
                categories: [
                    {
                        value: '1',
                        label: '手机',
                        children: [
                            { value: '11', label: '智能手机' },
                            { value: '12', label: '老人机' }
                        ]
                    },
                    {
                        value: '2',
                        label: '电脑',
                        children: [
                            { value: '21', label: '笔记本' },
                            { value: '22', label: '台式机' }
                        ]
                    }
                ],
                brands: [
                    { id: 1, name: '苹果' },
                    { id: 2, name: '华为' },
                    { id: 3, name: '小米' },
                    { id: 4, name: 'OPPO' }
                ],
                tags: [
                    { id: 101, name: '热卖' },
                    { id: 102, name: '新品' },
                    { id: 103, name: '推荐' }
                ],
                promotions: [
                    { id: 201, name: '618大促' },
                    { id: 202, name: '双十一活动' },
                    { id: 203, name: '限时折扣' }
                ],
                serviceOptions: ['七天无理由', '全国包邮', '假一赔十', '急速退款'],
                shippingTemplates: [
                    { id: 3001, name: '全国包邮' },
                    { id: 3002, name: '偏远地区不包邮' },
                    { id: 3003, name: '按重量计费' }
                ]
            };
        },
        methods: {
            nextStep() {
                this.currentStep++;
            },
            prevStep() {
                this.currentStep--;
            },
            handleMainImageChange(file) {
                this.formData.mainImage = URL.createObjectURL(file.raw);
            },
            handleAlbumChange(file, fileList) {
                this.albumFiles = fileList;
                this.formData.albumImages = fileList.map(f => URL.createObjectURL(f.raw));
            },
            handleAlbumRemove(file, fileList) {
                this.albumFiles = fileList;
                this.formData.albumImages = fileList.map(f => URL.createObjectURL(f.raw));
            },
            previewVideo() {
                if (this.formData.video) {
                    window.open(this.formData.video, '_blank');
                } else {
                    this.$message.warning('请先输入视频链接');
                }
            },
            previewShippingTemplate() {
                this.$message.info('功能开发中');
            },
            addSpecValue() {
                if (this.specValueInput && !this.newSpec.values.includes(this.specValueInput)) {
                    this.newSpec.values.push(this.specValueInput);
                    this.specValueInput = '';
                }
            },
            removeSpecValue(index) {
                this.newSpec.values.splice(index, 1);
            },
            addSpec() {
                if (!this.newSpec.name) {
                    this.$message.warning('请输入规格名称');
                    return;
                }

                if (this.newSpec.values.length < 1) {
                    this.$message.warning('请添加至少一个规格值');
                    return;
                }

                this.specs.push({
                    name: this.newSpec.name,
                    values: [...this.newSpec.values]
                });

                this.newSpec.name = '';
                this.newSpec.values = [];
                this.showAddSpecDialog = false;

                // 重新生成SKU矩阵
                this.generateSkuMatrix();
            },
            removeSpec(index) {
                this.specs.splice(index, 1);
                this.generateSkuMatrix();
            },
            generateSkuMatrix() {
                if (this.specs.length === 0) {
                    this.skuMatrix = [];
                    return;
                }

                // 生成规格组合
                const generateCombinations = (specs) => {
                    if (specs.length === 0) return [];

                    const result = [];
                    const firstSpec = specs[0];

                    for (let value of firstSpec.values) {
                        if (specs.length > 1) {
                            const subCombinations = generateCombinations(specs.slice(1));
                            for (let sub of subCombinations) {
                                result.push({
                                    specText: `${firstSpec.name}:${value} ${sub.specText}`,
                                    specs: [{name: firstSpec.name, value}].concat(sub.specs)
                                });
                            }
                        } else {
                            result.push({
                                specText: `${firstSpec.name}:${value}`,
                                specs: [{name: firstSpec.name, value}]
                            });
                        }
                    }

                    return result;
                };

                const combinations = generateCombinations(this.specs);
                this.skuMatrix = combinations.map(combo => {
                    // 查找是否已存在相同规格的SKU
                    const existingSku = this.skuMatrix.find(sku =>
                        sku.specText === combo.specText
                    );

                    return {
                        ...combo,
                        price: existingSku ? existingSku.price : '',
                        stock: existingSku ? existingSku.stock : '',
                        skuCode: existingSku ? existingSku.skuCode : '',
                    };
                });
            },
            batchFill(field, defaultValue) {
                if (this.skuMatrix.length === 0) {
                    this.$message.warning('请先添加规格');
                    return;
                }

                this.$prompt(`请输入要填充的${field === 'price' ? '价格' : '库存'}`, '批量填充', {
                    inputPattern: /^\d+$/,
                    inputErrorMessage: '请输入数字'
                }).then(({ value }) => {
                    this.skuMatrix.forEach(sku => {
                        sku[field] = value || defaultValue;
                    });
                    this.$message.success('批量填充成功');
                });
            },
            importFromExcel() {
                this.$message.info('Excel导入功能开发中');
            },
            saveDraft() {
                this.$message.success('草稿保存成功');
            },
            submitForm() {
                // 准备SKU数据
                const skuList = this.skuMatrix.map(sku => {
                    // 转换specData为对象格式
                    const specData = {};
                    sku.specs.forEach(spec => {
                        specData[spec.name] = spec.value;
                    });

                    return {
                        price: sku.price * 100, // 转为分
                        stock: parseInt(sku.stock),
                        skuCode: sku.skuCode,
                        specData
                    };
                });

                // 准备最终提交数据
                const submitData = {
                    ...this.formData,
                    skuList,
                    promotionIds: this.formData.promotionIds,
                    tagIds: this.formData.tagIds,
                    services: this.formData.services
                };

                // 添加预售配置
                if (this.enablePresell) {
                    submitData.skuList.forEach(sku => {
                        sku.presellConfig = {
                            ...this.presellConfig,
                            isPresell: true
                        };
                    });
                }

                console.log('提交数据:', JSON.stringify(submitData, null, 2));

                // 模拟API请求
                setTimeout(() => {
                    this.$message.success('商品提交成功，进入审核流程');
                    this.$router.push({ path: '/product/list' });
                }, 1000);
            }
        },
        watch: {
            specs: {
                handler() {
                    this.generateSkuMatrix();
                },
                deep: true
            }
        },
        mounted() {
            // 初始化一些示例数据
            this.formData.name = "Apple iPhone 13 Pro Max";
            this.formData.description = "新一代iPhone，更强大的性能";
            this.formData.detail = "<p>这是详细的商品描述...</p>";
            this.formData.mainImage = "https://placehold.co/800x800?text=主图";
            this.formData.albumImages = [
                "https://placehold.co/800x800?text=图1",
                "https://placehold.co/800x800?text=图2"
            ];
            this.albumFiles = this.formData.albumImages.map(url => ({ url }));

            // 初始化规格
            this.specs = [
                { name: '颜色', values: ['红色', '蓝色', '黑色'] },
                { name: '内存', values: ['128G', '256G', '512G'] }
            ];
            this.generateSkuMatrix();

            // 填充一些SKU数据
            setTimeout(() => {
                this.skuMatrix.forEach((sku, index) => {
                    sku.price = (699 + index * 100).toFixed(0);
                    sku.stock = 100 - index * 20;
                    sku.skuCode = `IPHONE-13-${index + 1}`;
                });
            }, 500);
        }
    });
</script>
</body>
</html>